<template>
  <div id="prizeAddEdit">
    <el-drawer
      ref="drawer"
      :title="isAdd ? '添加奖品' : '编辑奖品'"
      :visible.sync="drawerPrizeData.isShow"
      :before-close="labelHandleClose"
      size="550px"
    >
      <!-- 搜索 -->
      <el-form ref="searchFormEl" :model="form">
        <div class="prizeUser">
          <el-form-item label="奖品用户" label-width="90px">
            <el-select v-model="form.reachUser" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="prizeProvide">
          <el-form-item label="发放分类" label-width="90px">
            <el-select v-model="form.classify" placeholder="请选择">
              <el-option
                v-for="item in classifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发放类型" label-width="90px">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch"
            >
              查询
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 表格部分 -->
      <el-table v-loading="tableLoading" :data="prizeData" style="width: 100%">
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="classify"
          label="发放分类"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="发放类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="奖品名称"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="库存"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="message"
          label="说明"
          align="center"
          min-width="150"
        ></el-table-column>
      </el-table>
      <!-- 展示部分 -->
      <div v-if="listShow" class="prizeShow">
        <div class="title">
          <h3>已确定要发布的内容</h3>
        </div>
        <div class="content">
          <el-form ref="searchFormEl" :model="formShow" :rules="formShowRules">
            <div class="contentT">
              <el-form-item label="发放分类">
                优惠券
              </el-form-item>
              <el-form-item label="发放类型">
                满减卷
              </el-form-item>
              <el-form-item label="奖品名称">
                满100减20
              </el-form-item>
            </div>
            <div class="contentB">
              <el-form-item class="formShowDataT">
                <el-select v-model="formShow.dataType">
                  <el-option
                    v-for="item in showDataList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="formShow.dataType === '1'"
                class="formShowData"
              >
                <el-date-picker
                  v-model="formShow.date"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                v-if="formShow.dataType === '2'"
                style="margin: 0 15px;"
              >
                领取奖品时间起有效
                <el-input
                  v-model="formShow.days"
                  style="width: 50px;"
                ></el-input>
                天
              </el-form-item>
              <el-form-item label="奖品发放数量" class="formShowNum">
                <el-input
                  v-model="formShow.num"
                  placeholder="奖品发放数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="发放时间" class="formShowIssueData">
                <el-date-picker
                  v-model="formShow.IssueData"
                  type="date"
                  placeholder="选择时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item class="formShowBtn">
                <el-button type="danger" plain @click="delShow">
                  删除
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 按钮部分 -->
      <div class="cus-drawer_footer">
        <div class="cus-btns">
          <el-button type="success" plain @click="cancelLabel">
            取 消
          </el-button>
          <el-button type="success" @click.prevent="handelAdd">
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'PrizeAddEdit',
  msg: '创建活动-奖品设置-新增/编辑弹窗',
  props: ['drawerPrizeData'],
  data() {
    return {
      isAdd: true, // 新增-true,编辑-false
      tableLoading: false,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      form: {
        reachUser: '1', // 用户
        classify: '1', // 发放分类
        type: '1' // 发放类型
      }, // 表单数据
      formShow: {
        data: '',
        days: '',
        dataType: '1',
        num: '',
        IssueData: ''
      }, // 展示表单数据
      userList: [
        {
          value: '1',
          label: '发布活动用户'
        },
        {
          value: '2',
          label: '参与活动用户'
        },
        {
          value: '3',
          label: '提交活动用户'
        },
        {
          value: '4',
          label: '一等奖用户'
        }
      ], // 用户
      classifyList: [
        {
          value: '1',
          label: '优惠券'
        },
        {
          value: '2',
          label: '品牌券'
        }
      ], // 发放分类
      typeList: [
        {
          value: '1',
          label: '满减券'
        },
        {
          value: '2',
          label: '折扣券'
        }
      ], // 发放类型
      prizeData: [
        {
          name: '8折',
          message: '吃吃吃',
          num: '111',
          classify: '优惠券',
          type: '满减券'
        },
        {
          name: '8折',
          message: '富热喀什地方教会的即可和',
          num: '111',
          classify: '优惠券',
          type: '满减券'
        },
        {
          name: '8折',
          message: '附加费',
          num: '111',
          classify: '优惠券',
          type: '折扣券'
        }
      ], // table
      showDataList: [
        {
          value: '1',
          label: '时间段'
        },
        {
          value: '2',
          label: '有效时长'
        }
      ], // 展示数据
      listShow: false, // 展示数据显示隐藏
      formShowRules: {
        // 展示验证
        num: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        IssueData: [{ required: true, message: '请选择时间', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.isAdd = this.drawerPrizeData.type === 'add'
    if (this.drawerPrizeData.type === 'edit') {
      this.form = Object.assign({}, this.drawerPrizeData.params)
    }
  },
  methods: {
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.tableLoading = false
      this.drawerPrizeData.isShow = false
    },
    // 获取表格列表
    loadprizeData() {
      this.tableLoading = false
    },
    // 查询
    toSearch() {
      this.tableLoading = true
      this.loadprizeData()
    },
    handelAdd() {
      this.$refs.searchFormEl.validate((valid) => {
        if (!valid) {
          return
        }
        this.listShow = true
        this.$emit('addEdit-success')
      })
    },
    // 删除
    delShow() {
      this.$confirm('确定删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>
<style lang="less">
#prizeAddEdit {
  .el-form-item__label {
    width: auto !important;
  }
  .el-drawer {
    .el-drawer__header {
      font-size: 15px;
      margin-bottom: 10px;
    }
    .el-drawer__body {
      .el-form-item__content {
        display: inline-block;
      }
      .prizeUser {
        background: #f3f4f7;
        height: 60px;
        padding-top: 2%;
        margin-bottom: 10px;
        padding-left: 2%;
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .prizeProvide {
        padding-left: 2%;
        .el-input {
          width: 125px !important;
        }
        .el-form-item {
          display: inline-block;
          .el-form-item__content {
            margin-left: 0 !important;
          }
        }
        .s-btn {
          margin-left: 3%;
        }
      }
      .prizeShow {
        margin: 30px 0 0 20px;
        .title {
          border-left: 3px solid #1dc8a4;
          height: 12px;
          line-height: 12px;
          padding-left: 5px;
          margin-bottom: 20px;
        }
        .content {
          .contentT {
            .el-form-item {
              display: inline-block;
              margin-right: 50px;
              margin-bottom: 0 !important;
              .el-form-item__label {
                color: #b0b2b7 !important;
                font-size: 13px;
              }
            }
          }
          .contentB {
            .el-form-item {
              display: inline-block;
            }
            .formShowDataT {
              .el-input {
                width: 104px !important;
              }
            }
            .formShowData {
              margin-right: 15px;
              .el-date-editor {
                width: 225px !important;
              }
            }
            .formShowNum {
              margin-right: 15px;
              .el-input {
                width: 100px !important;
              }
              .el-form-item__content {
                display: inline-block !important;
              }
            }
            .formShowIssueData {
              .el-date-editor {
                width: 195px !important;
              }
            }
            .formShowBtn {
              margin-left: 10%;
              margin-bottom: 26px;
              vertical-align: bottom;
              .el-button {
                padding: 20px 10px;
                margin-left: 2%;
              }
            }
          }
        }
      }
      .cus-drawer_footer {
        width: 100%;
        height: 50px;
        line-height: 60px;
        text-align: right;
        padding-right: 20px;
        position: absolute;
        bottom: 0;
        box-shadow: 0 0 4px 0 #cfd9ee;
        .el-button {
          padding: 5px 30px !important;
        }
      }
    }
  }
}
</style>
